<template>
    <p>组合式API写法</p>
    <p>ref</p>
    <p>count: {{ count }}</p>
    <p>test: {{ test }}</p>

    <p>reactivde ===========</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name:{{ obj.name }}</p>
    <p>obj.age:{{ obj.age }}</p>
    <p>arr:{{ arr }}</p>

    <p>computed</p>
    <p>countAddFive:{{ countAddFive }}</p>
    <p>objAgeAddFive:{{ objAgeAddFive }}</p>

    <p>methods</p>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">updateObj</button>
    
    <p>组件</p>
    <Son :foo="test" :age="obj.age" />
</template>

<script setup>
import {ref,reactive, computed,watch} from 'vue'
import Son from './Son.vue'

const count = ref(10)
const test = ref("hello world")

console.log(count);

const obj = reactive({
    name:'tom',
    age:12
})

const arr =reactive([1,2,3,4,5])

console.log(obj.name);
console.log(obj.age);

const countAddFive = computed(()=>{
    return count.value + 5
})

const objAgeAddFive = computed(()=>{
    return obj.age + 5
})

function countAddOne() {
    count.value++
}

const countAddTwo = ()=>{
    count.value +=2
}

const updateObj = ()=>{
    updateObjName()
}

const updateObjName = ()=>{
    obj.name = 'jerry'
}

// 监听data
watch(count, (newVal, oldVal) =>{
    console.log('count发生了改变');
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})
// 监听computed
watch(countAddFive, (newVal, oldVal) =>{
    console.log('countAddFive发生了改变');
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})

watch(obj, (newVal, oldVal)=>{
    console.log('obj发生了改变');
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})

watch(()=> obj.name, (newVal, oldVal)=>{
    console.log('obj.name发生了改变');
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})
</script>